import React from 'react'
import '../css/sider.less'
import logo from '../images/logo.png';
// 左侧导航组件Sider

// 导入antd组件
import { Link,withRouter } from 'react-router-dom'
import { Menu, Icon } from 'antd';

// 将导航的配置文件导入
import menuList from '../config/menuConfig'

const { SubMenu } = Menu;

class LeftSider extends React.Component {
    // 根据menu的数据数组生成对应的标签数组
    // 法一:map+递归
    // getMenuNodes = (menuList) => {
    //     return menuList.map(item => {
    //         if (!item.children) {
    //             return (
    //                 <Menu.Item key={item.key}>
    //                     <Link to={item.key}>
    //                         <Icon type={item.icon} />
    //                         <span>{item.title}</span>
    //                     </Link>
    //                 </Menu.Item>
    //             )
    //         } else {
    //             return (
    //                 <SubMenu
    //                     key={item.key}
    //                     title={
    //                         <span>
    //                             <Icon type={item.icon} />
    //                             <span>{item.title}</span>
    //                         </span>
    //                     }
    //                 >
    //                     {/* 使用递归来生成subMenu的子菜单 */}
    //                     {this.getMenuNodes(item.children)}
    //                 </SubMenu>
    //             )
    //         }
    //     })
    // }

    // 法二:reduce+递归
    getMenuNodes = (menuList) => {

        const path = this.props.location.pathname;

        return menuList.reduce((pre, item) => {
            if (!item.children) {
                pre.push((
                    <Menu.Item key={item.key}>
                        <Link to={item.key}>
                            <Icon type={item.icon} />
                            <span>{item.title}</span>
                        </Link>
                    </Menu.Item>
                ))
            } else {
                // 查找一个与当前请求路径匹配的Item
                const cItem = item.children.find(cItem => cItem.key === path)
                if(cItem){
                    this.openKey = item.key
                }
                pre.push((
                    <SubMenu
                        key={item.key}
                        title={
                            <span>
                                <Icon type={item.icon} />
                                <span>{item.title}</span>
                            </span>
                        }
                    >
                        {/* 使用递归来生成subMenu的子菜单 */}
                        {this.getMenuNodes(item.children)}
                    </SubMenu>
                ))
            }
            return pre
        }, [])
    }

    // componentWillMount方法，在render()执行之前执行，执行一次
    // 为第一个render()准备数据（必须是同步）
    componentWillMount(){
        this.getMenu = this.getMenuNodes(menuList)
        
    }

    render() {

        const openkey = this.openKey

        return (
            // debugger
            <div className='left-nav'>
                <Link to='/' className='left-nav-header'>
                    <img src={logo} alt="logo" />
                    <h1>叽叽谷系统</h1>
                </Link>
                <Menu
                    // defaultSelectedKeys={[this.props.location.pathname]}  //默认
                    selectedKeys={[this.props.location.pathname]} //动态
                    defaultOpenKeys={[openkey]}
                    mode="inline"
                    theme="dark"
                // inlineCollapsed={this.state.collapsed}
                >


                    {/* <Menu.Item key="/home">
                        <Link to='/home'>
                            <Icon type="pie-chart" />
                            <span>首页</span>
                        </Link>
                    </Menu.Item>

                    <SubMenu
                        key="sub1"
                        title={
                            <span>
                                <Icon type="mail" />
                                <span>商品</span>
                            </span>
                        }
                    >
                        <Menu.Item key="/category">
                            <Link to='/category'>
                                <Icon type="mail" />
                                <span>品类管理</span>
                            </Link>
                        </Menu.Item>
                        <Menu.Item key="/product">
                            <Link to='/product'>
                                <Icon type="mail" />
                                <span>商品管理</span>
                            </Link>
                        </Menu.Item>
                    </SubMenu> */}

                    {
                        this.getMenu
                    }
                </Menu>
            </div>
        )
    }
}

// withRouter是一个高阶组件(是个函数),包装非路由组件,返回一个新的组件,新的组件向非路由组件传递3个属性:history/localtion/match

export default withRouter(LeftSider)